<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="icon" type="image/png" href="img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>类别管理</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet"/>

    <!--  Light Bootstrap Table core CSS    -->
    <link href="${pageContext.request.contextPath}/css/light-bootstrap-dashboard.css" rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="${pageContext.request.contextPath}/css/demo.css" rel="stylesheet" />


    <!--     Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
            rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/pe-icon-7-stroke.css"
          rel="stylesheet" />


	
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"></script>
	<script type="text/javascript">
	
	$(function(){
	    //删除类目
	    $("[name='del']").click(function () {
          var id = $(this).val();
          if(confirm("确认删除该类目？")){
              $.ajax({
                  url:"${pageContext.request.contextPath}/category/delCategory.html",
                  data:{
                      id:$(this).val()
                  },
                  success:function (data) {
                      if(data=="ok"){
                          $.notify({
                              icon: 'pe-7s-gift',
                              message: " <b>删除成功</b>"

                          },{
                              type: 'info',
                              //  type: 'danger',
                              timer: 4000
                          });
                          $("#tr"+id).remove();
                      }else{
                          $.notify({
                              icon: 'pe-7s-gift',
                              message: " <b>删除失败</b>"

                          },{
                              type: 'danger',
                              timer: 4000
                          });
                      }
                  }
              })
          }
        })


        //改变sort
        $("[name='sort']").change(function () {
            $.ajax({
                url:"${pageContext.request.contextPath}/category/changeSort.html",
                data:{
                    id:$(this).attr("id"),
                    sort:$(this).val()
                },
                success:function (data) {
                    if(data=="ok"){
                        location.reload();
                    }
                }
            })
        })
		
			
			
	});
				   
			
	
	
	</script>

    <style>
        input[type=number] {
            -moz-appearance:textfield;
        }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    </style>
	
	
	
	
</head>
<body>
<div class="wrapper">
    


	
    <!--左侧导航栏-->
    <%@include file="./include/left.jsp"%>
    
    
    <div class="main-panel">
    	
       <%@include file="./include/nav.jsp"%>


        <div class="content">
            <div class="container-fluid">
                <div class="row">
                	<div class="col-md-6" style="width: 900px;">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">类别管理</h4>
                                <p class="category">Backend development</p>
                            </div>

                            <div style="float:right; width: 150px; height:50px;  margin-right: 10px; margin-top: -30px;">

                                <button type="button"  class="btn btn-info btn-fill pull-right"
                                    onclick="window.location.href='${pageContext.request.contextPath}/category/toAddCategory.html'"
                                    >添加类目</button>
		                          
		                          <!--  </div> -->
                          
                           </div>
                            <div class="content">
                                <div class="table-full-width">
                                    <table class="table">
                                        <tbody>
                                           <tr>
                                            <td>优先级</td>
                                            <td>类别名称</td>
                                            <td>类型</td>
                                            <td align="center">操作  </td>
                                            <td>二级类目</td>
                                           </tr>
                                           <c:forEach items="${categories}" var="category" varStatus="vs">
                                                   <tr id="tr${category.id}">
                                                       <td style=" width:220px;">
                                                           <div style=" width:130px;">
                                                               <input type="number" class="form-control" placeholder="类别优先级" id="${category.id}"   name="sort"  value="${category.sort}">
                                                           </div>
                                                       </td>
                                                       <td>${category.cname}</td>
                                                       <td>${category.type==0?"产品":"新闻"}</td>
                                                       <td class="td-actions" align="center">
                                                           <button type="submit" rel="tooltip" title="修改" class="btn btn-info btn-simple btn-xs"
                                                           onclick="window.location.href='${pageContext.request.contextPath}/category/toUpdateCategory.html?cid=${category.id}'"
                                                           >
                                                               <i class="fa fa-edit"></i>
                                                           </button>
                                                           <button type="button" rel="tooltip" title="删除" name="del" value="${category.id}" class="btn btn-danger btn-simple btn-xs">
                                                               <i class="fa fa-times"></i>
                                                           </button>
                                                       </td>
                                                       <td>
                                                           <button type="button" rel="tooltip" title="二级类目" class="btn btn-info btn-simple btn-xs"
                                                           onclick="window.location.href='${pageContext.request.contextPath}/category/toCategorySecond.html?cid=${category.id}'"
                                                           >
                                                               <i>→</i>
                                                           </button>
                                                       </td>
                                                   </tr>
                                           </c:forEach>

                                            
                                        </tbody>
                                    </table>
                                </div>

                                <div class="footer">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
	            </div>
                </div>
            </div>
      

		
<%@include file="./include/footer.jsp"%>
    </div>
</div>


</body>

    <!--   Core JS Files   -->
    <script src="${pageContext.request.contextPath}/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="${pageContext.request.contextPath}/js/bootstrap-checkbox-radio-switch.js"></script>

	<!--  Charts Plugin -->
	<script src="${pageContext.request.contextPath}/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="${pageContext.request.contextPath}/js/bootstrap-notify.js"></script>


    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
	<script src="${pageContext.request.contextPath}/js/light-bootstrap-dashboard.js"></script>

	<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
	<script src="${pageContext.request.contextPath}/js/demo.js"></script>
	


	

</html>